<!--商品列-->
<style scope>
.m-img {
  padding-bottom: 33%;
  display: block;
  position: relative;
  max-width: 100%;
  background-size: cover;
  background-position: center center;
  cursor: pointer;
  border-radius: 2px;
}

.m-title {
  color: #fff;
  text-align: center;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  font-weight: 500;
  font-size: 16px;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

.m-time {
  font-size: 12px;
  padding-top: 4px;
  border-top: 1px solid #f0f0f0;
  display: inline-block;
  margin-top: 5px;
}

.vux-masker {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

</style>
<template>
  <div>
    <div style="margin: 10px;overflow: hidden;" v-for="item in list" @click="routerDetail(item.id)">
      <masker style="border-radius: 2px;">
        <div class="m-img" :style="{backgroundImage: 'url(' + item.image + ')'}"></div>
        <div slot="content" class="m-title">
          {{item.goodsName}}
          <br/>
          <span class="m-time">{{item.price}} 元/箱</span>
        </div>
      </masker>
    </div>
  </div>
</template>
<script>
import { Masker } from 'vux'

export default {
  components: {
    Masker
  },
  data() {
    return {
      userId: window.localStorage["userId"],
      list: []
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    load() {
      let _that = this;
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/chList/queryData.json",
        params: {
          userId: this.userId
        },
        successFc: (response) => {
          this.list = response.data.data
        }
      });
    },
    routerDetail(goodsId) {
      this.$router.push({
        path: '/tourl/charcoalDetail',
        query: {
          goodsId: goodsId,
        }
      })
    }
  }
}

</script>
